<script setup>
import { computed } from 'vue'
import { Head, Link, router, usePage } from '@inertiajs/vue3'
import SpotlightShell from '@/Components/Spotlight/Layout.vue'
import SearchBar from '@/Components/Features/SearchBar.vue'
import BackToTop from '@/Components/Features/BackToTop.vue'
import Toast from '@/Components/UI/Toast.vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const page = usePage()

const user = computed(() => page.props.auth?.user ?? null)

const navigation = computed(() => {
  return [
    {
      name: '首页',
      href: route('blog.home'),
      match: () => route().current('blog.home') || page.url === '/'
    },
    {
      name: '归档',
      href: route('blog.archive'),
      match: () =>
        route().current('blog.archive') ||
        page.url === '/archive'
    },
    {
      name: '系列',
      href: route('blog.series.index'),
      match: () => {
        const currentRoute = route().current()
        return currentRoute?.startsWith('blog.series.') || page.url.startsWith('/series')
      }
    },
    {
      name: '项目',
      href: route('blog.projects'),
      match: () => route().current('blog.projects')
    },
    {
      name: '关于',
      href: route('blog.about'),
      match: () => route().current('blog.about') || page.url.startsWith('/about')
    }
  ]
})

const logout = () => {
  router.post(route('logout'))
}
</script>

<template>
  <div class="min-h-screen bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
    <Head :title="props.title" />

    <SpotlightShell :navigation="navigation">
      <template #header-actions>
        <div class="hidden items-center gap-2 md:flex">
          <SearchBar variant="icon" />
          <!-- <Link
            v-if="!user"
            :href="route('login')"
            class="rounded-full border border-zinc-200 px-3 py-1 text-sm font-medium text-zinc-700 transition hover:border-zinc-300 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:text-zinc-50"
          >
            登录
          </Link> -->
          <button
            v-if="user"
            type="button"
            class="rounded-full border border-zinc-200 px-3 py-1 text-sm font-medium text-zinc-700 transition hover:border-zinc-300 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:text-zinc-50"
            @click="logout"
          >
            退出
          </button>
        </div>
      </template>

      <!-- 移动端首页隐藏搜索框以保持聚焦 -->
      <div
        v-if="!route().current('blog.home')"
        class="px-6 pt-6 md:hidden"
      >
        <SearchBar />
      </div>

      <slot />
    </SpotlightShell>

    <BackToTop />
    <Toast />
  </div>
</template>

